import React, {memo, useState, useTransition} from "react"
import names from "./name/names";

const App_Transition = memo(() => {

    const [showNames, setShowNames] = useState(names)
    const [isPending, startTransition] = useTransition()


    function valueChangeHandle(event) {
        startTransition(() => {
            const value = event.target.value;
            console.log(value)
            setShowNames(showNames.filter(item => item.includes(value)))
        })

    }

    return (
        <div>
            <input type="text" onInput={valueChangeHandle}/>
            <h2>{isPending && <span>loading...</span>}</h2>
            <ul>
                {
                    showNames.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
})


export default App_Transition